<template>
  <div class="cxy-page">
    <button class="banckbtn" @click="backbtnclick"></button>
    <div class="topview">
      <div class="infoview">
        <div class="uname">方小小</div>
        <div class="subinfo">来自浙江杭州的java工程师</div>
      </div>
      <div class="tipmsgview">
        与人沟通谨防对方是酒托、饭托、诈骗，多留心眼儿对有自己有好处!!!
      </div>
    </div>
    <div class="list">
      <div class="cell">
        <div class="content other">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
      </div>
      <div class="cell">
        <div class="content me">😄😄</div>      
      </div>      
      <div class="cell" v-for='n in 3'>
        <div class="content sys">
          <img src="http://img1.imgtn.bdimg.com/it/u=1596263055,1586691448&fm=200&gp=0.jpg" mode='top'>
          <div class="bttitle">23456789</div>
        </div>

      </div>


    </div>
    <div class="inputbar">
      <input class="intf" type="text" placeholder="在此输入">
      <button class="sendbtn">发送</button>
    </div>
  </div>
</template>

<script>

  export default {
    mounted(){
     
    },
    data(){
      return {
        msgs:[],
      }
    },
    methods:{
      backbtnclick(){
        wx.navigateBack()
      },
    },
  }
</script>


<style scoped>
.cxy-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.banckbtn::after {
  border:none;
}
.banckbtn {
  z-index: 99;
  position: fixed;
  width: 80px;
  height: 40px;
  left: 25px;
  top: 30px;
  background-image: url();
    background-size: 30%;
    background-position: left;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0);
}
.topview {
  position: relative;
  height: 160px;
  background-color: white;
}
.infoview {
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 10px;
}
.uname {
  text-decoration: underline;
  font-size: 18px;
  margin-bottom: 5px;
  color:rgba(95,113,238,1);
}
.subinfo {
  font-size: 13px;
  color: #949494;
}

.tipmsgview {
  height: 25px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 11px;
  line-height: 25px;
  text-align: center;
  color: white;
  background-color: #FFA800;
}

.list {
  flex:1;
  background-color: white;
  margin-bottom: 50px;
  overflow-y: scroll;
  padding-top: 10px;
  padding-bottom: 15px;
}
.list::-webkit-scrollbar {
    display: none;
}
.inputbar {
  position: fixed;
  height: 50px;
  width: 100%;
  left: 0;
  bottom: 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow:row;
}

.cell {
  padding: 15px;
  padding-top: 5px;
  padding-bottom: 10px;

  display: block;
  overflow: hidden;  
  font-size: 15px;
}

.other {
  max-width: 70%;
  min-width: 25px;
  float: left;
  padding: 10px;
  border-radius: 0 5px 5px 5px;
  background-color: white;
  color: #979797;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.me {
  max-width: 70%;
  min-width: 25px;
  float: right;
  padding: 10px;
  border-radius: 5px 5px 0 5px;
  color:white;
  background-image: linear-gradient(-90deg, #5F8EEE 0%, #5F6FEE 100%);
  box-shadow: 0 2px 10px rgba(95,113,238,0.5);
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}

.sys {
  position: relative;
  background-color: red;
  border-radius: 5px;
  overflow: hidden;
  height: 190px;
}

.sys img {
  width: 100%;
  height: 100%;
}

.bttitle {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  height: 30px;
  width: 100%;
  background-color: rgba(0,0,0,0.4);
  padding-left: 15px;
  line-height: 30px;
  color: white;
}

.intf {
  background: white;
  height: 35px;
  flex:1;
  margin-left: 15px;
  margin-right: 15px;
  padding-left: 15px;
  font-size: 16px;
}

.sendbtn {
  height: 35px;
  line-height: 35px;
  width: 80px;
  margin-right: 15px;
  padding: 0;
  font-size: 16px;
  background-color: #fff;
  color: rgba(95,113,238,1);
}

</style>
